<template>
  <div style="height: 100%">
    <div v-if="historyList.length > 0" style="height: 100%">
      <MusicListTime
        :history="historyList"
        @updateHistory="updateHistory"
        pageName="historyList"
      />
    </div>
    <div v-else class="nothing">这里什么也没有~</div>
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue"
import MusicListTime from "../../components/MusicListTime/MusicListTime.vue"
const historyList = ref([])
onMounted(() => {
  historyList.value = JSON.parse(localStorage.getItem("historyList")) || []
})

const updateHistory = (data) => {
  historyList.value = data
}
</script>
<style scoped lang="less">
.nothing {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 14px;
  color: hsla(0, 0%, 100%, 0.6);
}
</style>
